<script setup>
import {WarningFilled} from "@element-plus/icons-vue";
defineProps({
  content: {
    type: String,
    default: ''
  },
  text:{
    type:String,
    default: ''
  },
  placement: {
    type: String,
    default: 'bottom'
  },
  effect:{
    type: String,
    default: 'dark'
  },
  color:{
    type: String,
    default: 'var(--el-color-info)'
  },
  size:{
    type: [String,Number],
    default: '16'
  }
})
</script>

<template>
    <div class="flex items-center">
      <el-tooltip
          :effect="effect"
          :content="content"
          :placement="placement"
          v-if="content"
      >
        <el-icon  :color="color" :size="size">
          <WarningFilled />
        </el-icon>
      </el-tooltip>
      <el-icon  v-if="!content" :color="color" :size="size">
        <WarningFilled />
      </el-icon>
      <span  v-if="text" :style="{ color: color }" class="ml-6">{{ text }}</span>
    </div>
</template>
<style scoped lang="scss">
</style>
